<script setup lang="ts" name="rankList">
import { getRankListApi } from '@/api/home'
import { IRankListItem, IUser } from '@/views/rankList/type'
import noCp from '@/assets/rankList/noCpHead.png'
import { sendMessage, formatBigNumber } from '@/utils'
import { CLINET_COMMAND } from '@/utils/types'

const maleAvatar =
  'https://imears-production.oss-cn-hangzhou.aliyuncs.com/image/7c546edec6ec36913599f41a8d69389f786da875.png'
const femaleAvatar = 'https://imechos.oss-cn-hangzhou.aliyuncs.com/image/7725278f869dfa9541c695122d17627aaf8f64ef.png'

const rankListData:  { rankList: IRankListItem[]; myRankList?: IRankListItem } = reactive({
  rankList: [],
  myRankList: {
    diff: 0,
    female: {
      avatar: '',
      code: '',
      gender: 0,
      id: 0,
      nickname: '',
      special: {
        avatar: {
          material: '',
        },
      },
    },
    id: 0,
    male: {
      avatar: '',
      code: '',
      gender: 0,
      id: 0,
      nickname: '',
      special: {
        avatar: {
          material: '',
        },
      },
    },
    score: 0,
    sn: '',
    teammate_user_id: 0,
    top: 0,
    user_id: 0,
  },
})

const icon = ref(false)

const init = async (bool = false) => {
  if (bool) {
    icon.value = true
    setTimeout(() => {
      icon.value = false
    }, 2500)
  }
  const { data } = await getRankListApi<{ leaderboard: IRankListItem[]; team: IRankListItem; user: IUser }>()
  rankListData.rankList = data!.leaderboard
  rankListData.myRankList = data!.team
  data!.user.gender === 1 ? (rankListData.myRankList.male = data!.user) : (rankListData.myRankList.female = data!.user)
}

init()
</script>

<template>
  <div class="flex flex-col items-center rank_content relative">
    <img
      src="@/assets/homepage/refreshIcon.png"
      class="absolute refresh_icon"
      :class="{ refresh_rotate: icon }"
      alt=""
      @click="init(true)"
    />
    <div class="rank_title"></div>
    <div class="one_rank flex flex-col absolute">
      <div class="one_info flex flex-col">
        <div class="flex">
          <div class="one_head mr_15 relative">
            <img
              :src="rankListData.rankList?.[0]?.male.avatar ?? maleAvatar"
              class="one_head border_50"
              alt=""
              @click="
                rankListData.rankList?.[0]?.male.id &&
                  sendMessage(CLINET_COMMAND.USER_CENTER, {
                    userId: rankListData.rankList?.[0]?.male.id,
                  })
              "
            />
          </div>
          <div class="one_head relative">
            <img
              :src="rankListData.rankList?.[0]?.female.avatar ?? femaleAvatar"
              class="one_head border_50"
              alt=""
              @click="
                rankListData.rankList?.[0]?.female.id &&
                  sendMessage(CLINET_COMMAND.USER_CENTER, {
                    userId: rankListData.rankList?.[0]?.female.id,
                  })
              "
            />
          </div>
        </div>
        <div class="flex name items-center">
          <span class="text_over w_54">{{ rankListData.rankList?.[0]?.male?.nickname ?? '暂无上榜' }}</span>
          <span class="f_9">&</span>
          <span class="text_over w_54">{{ rankListData.rankList?.[0]?.female?.nickname ?? '暂无上榜' }}</span>
        </div>
        <span class="TOP1">TOP1</span>
      </div>
    </div>
    <div class="two_rank absolute flex flex-col items-center">
      <div class="flex two_head">
        <img
          :src="rankListData.rankList?.[1]?.male.avatar ?? maleAvatar"
          class="border_50 head_picture mr_15"
          alt=""
          @click="
            rankListData.rankList?.[1]?.male.id &&
              sendMessage(CLINET_COMMAND.USER_CENTER, {
                userId: rankListData.rankList?.[1]?.male.id,
              })
          "
        />
        <img
          :src="rankListData.rankList?.[1]?.female.avatar ?? femaleAvatar"
          class="border_50 head_picture"
          alt=""
          @click="
            rankListData.rankList?.[1]?.female.id &&
              sendMessage(CLINET_COMMAND.USER_CENTER, {
                userId: rankListData.rankList?.[1]?.female.id,
              })
          "
        />
      </div>
      <div class="flex name items-center">
        <span class="w_54 text_over">{{ rankListData.rankList?.[1]?.male.nickname  ?? '暂无上榜' }}</span>
        <span class="f_9">&</span>
        <span class="w_54 text_over">{{ rankListData.rankList?.[1]?.male.nickname  ?? '暂无上榜' }}</span>
      </div>
      <span v-if="rankListData.rankList?.[1]?.male.nickname" class="diff_value">距离上一名{{ rankListData.rankList?.[1]?.diff === 0 ?'9999':rankListData.rankList?.[1]?.diff? formatBigNumber(rankListData.rankList?.[1]?.diff) :  '0' }}</span>
      <spanx v-else class="TOP1">TOP2</spanx  >

    </div>
    <div class="three_rank absolute flex flex-col items-center">
      <div class="flex two_head">
        <img
          :src="rankListData.rankList?.[2]?.male.avatar ?? maleAvatar"
          class="border_50 head_picture mr_15"
          alt=""
          @click="
            rankListData.rankList?.[2]?.male.id &&
              sendMessage(CLINET_COMMAND.USER_CENTER, {
                userId: rankListData.rankList?.[2]?.male.id,
              })
          "
        />
        <img
          :src="rankListData.rankList?.[2]?.female.avatar ?? femaleAvatar"
          class="border_50 head_picture"
          alt=""
          @click="
            rankListData.rankList?.[2]?.female.id &&
              sendMessage(CLINET_COMMAND.USER_CENTER, {
                userId: rankListData.rankList?.[2]?.female.id,
              })
          "
        />
      </div>
      <div class="flex name items-center">
        <span class="w_54 text_over">{{ rankListData.rankList?.[2]?.male.nickname  ?? '暂无上榜'}}</span>
        <span class="f_9">&</span>
        <span class="w_54 text_over">{{ rankListData.rankList?.[2]?.male.nickname  ?? '暂无上榜'}}</span>
      </div>
      <span v-if="rankListData.rankList?.[2]?.male.nickname" class="diff_value">距离上一名{{ rankListData.rankList?.[2]?.diff === 0 ?'9999':rankListData.rankList?.[2]?.diff?formatBigNumber(rankListData.rankList?.[2]?.diff) : '0' }}</span>
      <span v-else class="TOP1">TOP3</span>

    </div>
    <div class="snow_img"></div>
    <div class="flex flex-col rank_box">
      <div class="rank_list">
        <div
          v-for="item in 7"
          :key="item"
          class="rank_item flex items-center justify-between"
          :class="{ rank_bg: rankListData.rankList?.[item + 2]?.top === rankListData.myRankList?.top }"
        >
          <div class="flex">
            <span class="rank">{{ item + 3 }}</span>
            <div class="flex flex-col rank_img">
              <div class="relative rank_head">
                <div class="absolute rank_head_img rank_one flex justify-center items-center">
                  <div class="head_portrait flex justify-center items-center">
                    <img
                      :src="rankListData.rankList?.[item + 2]?.male.avatar ?? maleAvatar"
                      class="rank_img_user border_50"
                      alt=""
                      @click="
                        rankListData.rankList?.[item + 2]?.male.id &&
                          sendMessage(CLINET_COMMAND.USER_CENTER, {
                            userId: rankListData.rankList?.[item + 2]?.male.id,
                          })
                      "
                    />
                  </div>
                  <!--    头像框    -->
                  <div
                    v-if="rankListData.rankList?.[item + 2]?.male?.special?.avatar?.material"
                    class="head_portrait_box rank_head_img absolute"
                    @click="
                      rankListData.rankList?.[item + 2]?.male.id &&
                        sendMessage(CLINET_COMMAND.USER_CENTER, {
                          userId: rankListData.rankList?.[item + 2]?.male.id,
                        })
                    "
                  >
                    <img
                      :src="rankListData.rankList?.[item + 2]?.male?.special?.avatar?.material"
                      class="rank_head_img"
                      alt=""
                    />
                  </div>
                </div>
                <div class="absolute rank_two rank_head_img flex justify-center items-center">
                  <div class="head_portrait flex justify-center items-center">
                    <img
                      :src="rankListData.rankList?.[item + 2]?.female.avatar ?? femaleAvatar"
                      class="rank_img_user border_50"
                      alt=""
                      @click="
                        rankListData.rankList?.[item + 2]?.female.id &&
                          sendMessage(CLINET_COMMAND.USER_CENTER, {
                            userId: rankListData.rankList?.[item + 2]?.female.id,
                          })
                      "
                    />
                  </div>
                  <div
                    v-if="rankListData.rankList?.[item + 2]?.female?.special?.avatar?.material"
                    class="head_portrait_box rank_head_img absolute"
                  >
                    <img
                      :src="rankListData.rankList?.[item + 2]?.female?.special?.avatar?.material"
                      class="rank_head_img"
                      alt=""
                      @click="
                        rankListData.rankList?.[item + 2]?.female.id &&
                          sendMessage(CLINET_COMMAND.USER_CENTER, {
                            userId: rankListData.rankList?.[item + 2]?.female.id,
                          })
                      "
                    />
                  </div>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text_over rank_name">
                  {{ rankListData.rankList?.[item + 2]?.male?.nickname ?? '暂无上榜' }}
                </span>
                <span class="f_9">&</span>
                <span class="text_over rank_name">
                  {{ rankListData.rankList?.[item + 2]?.female?.nickname ?? '暂无上榜' }}
                </span>
              </div>
            </div>
          </div>
          <span v-if="rankListData.rankList?.[item + 2]?.teammate_user_id" class="rank_value">
            距离上一名{{ rankListData.rankList?.[item + 2]?.diff === 0?'9999':rankListData.rankList?.[item + 2]?.diff?formatBigNumber(rankListData.rankList?.[item + 2]?.diff) : '0' }}
          </span>
        </div>
      </div>
      <div class="flex my_rank justify-between">
        <!--  无cp的时候  -->
        <div class="flex no_cp">
          <div
            class="title"
            :class="{
              not_rank: rankListData?.myRankList!.top === 0 && rankListData.myRankList?.teammate_user_id,
              not_cp: !rankListData.myRankList?.teammate_user_id,
            }"
          >
            <!--  not_rank  not_cp  -->
            <span v-if="rankListData?.myRankList?.top && rankListData?.myRankList?.top < 10">
              {{ rankListData?.myRankList?.top }}
            </span>
          </div>
          <div class="flex flex-col rank_img">
            <div class="relative rank_head">
              <div class="absolute index_100 rank_head_img rank_one flex justify-center items-center">
                <div class="head_portrait flex justify-center items-center">
                  <img
                    :src="rankListData?.myRankList?.male?.avatar ?? noCp"
                    alt=""
                    class="rank_img_user border_50"
                    @click="
                      rankListData?.myRankList?.male.id &&
                        sendMessage(CLINET_COMMAND.USER_CENTER, {
                          userId: rankListData?.myRankList?.male.id,
                        })
                    "
                  />
                </div>
                <div
                  v-if="rankListData?.myRankList?.male?.special?.avatar?.material"
                  class="head_portrait_box rank_head_img absolute"
                  @click="
                    rankListData?.myRankList?.male.id &&
                      sendMessage(CLINET_COMMAND.USER_CENTER, {
                        userId: rankListData?.myRankList?.male.id,
                      })
                  "
                >
                  <img :src="rankListData?.myRankList?.male?.special?.avatar?.material" class="rank_head_img" alt="" />
                </div>
              </div>
              <div class="absolute rank_two rank_head_img flex justify-center items-center">
                <div class="head_portrait flex justify-center items-center">
                  <img
                    :src="rankListData?.myRankList?.female?.avatar ?? noCp"
                    class="rank_img_user border_50"
                    alt=""
                    @click="
                      rankListData?.myRankList?.female.id &&
                        sendMessage(CLINET_COMMAND.USER_CENTER, {
                          userId: rankListData?.myRankList?.female.id,
                        })
                    "
                  />
                </div>
                <div
                  v-if="rankListData?.myRankList?.female?.special?.avatar?.material"
                  class="head_portrait_box rank_head_img absolute"
                  @click="
                    rankListData?.myRankList?.female.id &&
                      sendMessage(CLINET_COMMAND.USER_CENTER, {
                        userId: rankListData?.myRankList?.female.id,
                      })
                  "
                >
                  <img
                    :src="rankListData?.myRankList?.female?.special?.avatar?.material"
                    class="rank_head_img"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="flex items-center">
              <span class="text_over text-center rank_name">
                {{ rankListData?.myRankList?.male?.nickname ?? '暂无数据' }}
              </span>
              <span class="f_9">&</span>
              <span class="text_over rank_name">{{ rankListData?.myRankList?.female?.nickname ?? '暂无数据' }}</span>
            </div>
          </div>
        </div>
<!--        <span class="rank_value" v-if="rankListData?.myRankList?.top === 0">-->
<!--          未上榜-->
<!--        </span>-->

        <span
          v-if="rankListData?.myRankList?.top !== 1 && rankListData?.myRankList?.teammate_user_id"
          class="rank_value"
        >
          距离上一名{{rankListData?.myRankList?.diff === 0?'9999':rankListData?.myRankList?.diff? formatBigNumber(rankListData?.myRankList?.diff) : 0 }}
        </span>
        <span v-if="rankListData?.myRankList?.top === 1" class="rank_value">TOP1</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import 'index';
</style>
